<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生就业统计表</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i>添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1</td>
        <td>迪丽热巴</td>
        <td>23</td>
        <td>女</td>
        <td>12000</td>
        <td>北京</td>
        <td>2099/9/9 08:08:08</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>
    // 参考数据
    // const initData = [
    //   {
    //     stuId: 1,
    //     uname: '迪丽热巴',
    //     age: 22,
    //     salary: '12000',
    //     gender: '女',
    //     city: '北京',
    //     time: '2099/9/9 08:08:08'
    //   }
    // ]

    // tbody
    const tbody = document.querySelector('tbody')
    // 1.1 从本地存储拿数据到数组 。字符串要转为对象
    const initData = JSON.parse(localStorage.getItem('class2Data'))  // null
    console.log(initData);
    // 准备一个数组，要么以本地存储为准，要么就是一个空数组
    // const data = initData || []  // 利用短路或逻辑运算符 
    const data = [];
    if (initData != null) {
      data = initData
    }
    console.log(data);
    // localStorage.setItem('initData', JSON.stringify(initData)) // 复杂类型要转为字符串，通过JSON.stringify()

    // 录入表单项，组成对象，将对象追加到数组，再数组用JSON转为字符串存入本地存储中
    // 从本地存储中取出字符串，用JSON还原为数组对象，从数组中遍历得到到元素节点，最后显示 到表格
    // 删除内容，是从数组中删除，只要数组有改变，就做两件事，第一件，重新渲染页面，第二件，重新保存到本地存储

    function displayData() {
      // 渲染的时候数据 从数组 ，遍历 而来的。为了避免刷新丢，要存入本地存储      // 1. 渲染模块



      // console.log(data);
      // 利用map 来遍历 数组，返回得到一个含tr标签的新数组 
      const newData = data.map(function (item, i) {
        return `
        <tr>
          <td>${item.stuId}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.salary}</td>
          <td>${item.gender}</td>
          <td>${item.city}</td>
          <td>${item.time}</td>
          <td>
            <a href="javascript:" data-id='${i}'>
              <i class="iconfont icon-shanchu"></i>
              删除
            </a>
          </td>
        </tr>       `

      })
      console.log(newData);

      // 利用join方法，将数组拼成tr，td的HTML代码 ，并用innerHTML放在tbody
      tbody.innerHTML = newData.join('')
      // console.log(newData);
      // 显示条数
      document.querySelector('.title span').innerHTML = data.length
    }

    displayData()  // 调用渲染


    // 录入模块 
    // 1. 获取表单对象 ，并绑定提交 事件，
    const form = document.querySelector('form')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')

    form.addEventListener('submit', function (e) {
      // 阻止默认提交行为
      e.preventDefault()
      //非空判断 
      // console.log(uname.value);
      if (uname.value === '' || age.value === '' || salary === '') {
        return alert('有内容没写')  // 只要程序遇到上return 就会立即返回 而不执行后面的任何的代码
      }

      // 能到这里，说明 都填写 了。
      // 将所有表单项，组成对象，追加到data数组中
      const stu = {
        stuId: data.length ? data[data.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        salary: salary.value,
        gender: gender.value,
        city: city.value,
        time: new Date().toLocaleString()
      }
      console.log(stu);
      data.push(stu)
      console.log(data);
      // 清空表单
      form.reset()

      // 将更新后的数组，保存到本地存储中，转JSON
      localStorage.setItem('class2Data', JSON.stringify(data))

      displayData()  // 调用渲染



    })


    // 3 删除模块 
    tbody.addEventListener('click', function (e) {
      // 判断是不是点了A
      if (e.target.tagName === 'A') {
        // 不能直接删除，要先让用户确认一下，利用confirm确认框
        if (confirm('确认删除吗？')) {
          // console.log(6666);
          // 获取自定义属性，代表示了该tr对应的数组下标
          // console.log(e.target.dataset.id);
          // 利用splice(下标，数量) 从数组中删除元素
          data.splice(e.target.dataset.id, 1)
          // 删除后，数组发生了改变，要重新渲染页面
          displayData()
          // 数组改变后，要及时保存到本地存储
          localStorage.setItem('class2Data', JSON.stringify(data))
        }

      }
    })




  </script>
</body>

</html>